<template>
  <div class="container">
    <div class="header">
      <div >
        <router-link to='/index111'>
        <label>〈</label>
        </router-link>
      </div>
      <div ><span>欠费明细</span></div>
      <div ><span> </span></div>
    </div>
    <div id="table">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column fixed prop="name" label="姓名" width="80px"></el-table-column>
        <el-table-column prop="phone" label="电话" width="120px"></el-table-column>
        <el-table-column prop="arrearage" label="账户余额" width="80px"></el-table-column>
        <el-table-column fixed="right" prop="" label="" width="">
          <template slot-scope="scope">
            <el-button>充值</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<style scoped>
  .container{
    width: 100%;
    display: flex;
    flex-direction:column;
  }
  .header{
    width: 100%;
    height: 36px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:space-between;
    text-align: center;
    background-color: #00afff;
    color: white;
  }
  .header div{
    width: 20%;
    margin-top: auto;
    margin-bottom: auto;
  }



</style>

<script>
  export default {
    name: 'arrearage',
    data() {
      return {
        tableData: [{
          name: '王小虎',
          phone: 12345678910,
          arrearage:45
        },{
          name: '王小虎',
          phone: 12345678910,
          arrearage:45
        }]
      }
    }
  }
</script>
